<template>
  <Layout class="start-flow-view-header">
    <LayoutSide @click="back" class="left-button">
      <span class="iconfont">&#xe910;</span>
    </LayoutSide>
    <LayoutBody class="body">
      <van-text-ellipsis :content="flowTitle"/>
    </LayoutBody>
  </Layout>
</template>
<script setup>
import {closePopup, createFormDefinition, createProps} from '@/utils';
import Layout from '@comp/Layout/Layout.vue';
import LayoutSide from '@comp/Layout/LayoutSide.vue';
import LayoutBody from '@comp/Layout/LayoutBody.vue';
import {computed} from 'vue';

defineOptions({name: 'StartFlowViewHeader'});
const props = defineProps({
  formDefinition: createProps(Object, createFormDefinition),
  flowId: createProps(String),
});

function back() {
  closePopup()
}

const flowTitle = computed(() => {
  try {
    let flows = props.formDefinition.flows;
    return flows.find(f => f.id === props.flowId).titleFormulaText;
  } catch (e) {
    return  ''
  }
});

</script>
<style>
.start-flow-view-header {
  height: 2.5em;
}

.start-flow-view-header .iconfont,
.start-flow-view-header {
  font-weight: bolder;
  color: black;
  justify-content: center;
  align-items: center;
}

.start-flow-view-header .iconfont {
  font-size: 1.3em !important;
}
.start-flow-view-header .van-text-ellipsis {
  font-size: 1em;
}

.start-flow-view-header .body {
  padding: 0 0.2em;
}

.start-flow-view-header .left-button {
  width: 2em;
  text-align: center;
  height: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>